{% extends "index.html" %}
{% block linkcss %}
    {{ super() }}
    <script type="text/javascript" src="{{ url_for('static', filename='css/jquery.dataTables.min.css') }}"></script>
{% endblock %}
{% block title %}
    报告生成
{% endblock %}
{% block page_nav %}
    <li>报告</li>
    <li>报告生成</li>
{% endblock %}
{#页面内容#}
{% block content %}
    <!--查询条件-->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <form class="form-horizontal" method="POST"
                          action="{{ url_for('view.report_generation') }}" id="form_query" name="form_query">
                        <div class="form-group">
                            <label class="control-label col-md-1 col-md-offset-1" for="maintenanceContractNumber">合同编号</label>
                            <div class="col-md-2">
                                <input id="maintenanceContractNumber" class="form-control flatpickr-input" type="text" name="maintenanceContractNumber" placeholder="合同编号">
                            </div>
                            <label class="control-label col-md-1" for="idCode">识别码</label>
                            <div class="col-md-2">
                                <input id="idCode" class="form-control" type="text" name="idCode" placeholder="识别码">
                            </div>
                            <label class="control-label col-md-1" for="userEntityName">使用单位</label>
                            <div class="col-md-3">
                                <input id="userEntityName" class="form-control" type="text" name="userEntityName"
                                       placeholder="使用单位">
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-md-2 col-md-offset-4">
                                    <button class="btn btn-primary icon-btn" type="button" id="bt_query"><i
                                            class="fa fa-fw fa-lg fa-check-circle"></i>查询
                                    </button>
                                </div>
                                <div class="col-md-2 col-md-offset-1">
                                    <button class="btn btn-primary icon-btn" type="reset"><i
                                            class="fa fa-fw fa-lg fa-refresh"></i>重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--查询结果显示表格-->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-title">
                    {% if messages %}
                        <div class="alert alert-warning">
                            <p>报告编号为{{ messages }}的报告已存在,请删除后重新生成</p>
                        </div>
                    {% endif %}
                </div>
                <div class="table-responsive">
                    <div class="card-body" id="table">
                        <div>
                            <button id="delete" type="button" class="btn btn-danger btn-sm">
                                <i class="fa fa-trash-o" aria-hidden="true"></i>删除
                            </button>
                            <span class="col-md-offset-4">提示:表格内所列电梯将生成报告,请将不需要的电梯删除</span>
                        </div>
                        <form class="" method="POST"
                              action="{{ url_for('view.report_generation') }}" id="form_table" name="form_table">
                            <div>
                                <table class="table table-bordered nowrap" style="width: 100%;"
                                       id="sampleTable">
                                    <thead>
                                    <tr>
                                        <th><input type="checkbox" id="checkAll" name="checkAll"></th>
                                        <th>ID</th>
                                        <th>识别码</th>
                                        <th>使用单位</th>
                                        <th>设备名称</th>
                                        <th>检验有效期</th>
                                        <th>报告编号</th>
                                        <th>限速器校验日期</th>
                                        <th>限速器动作速度</th>
                                        <th>对重缓冲器距离</th>
                                        <th>重载试验</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for i, elevator in elevators %}
                                        <tr>
                                            <td><input type="checkbox" name="checkItem"></td>
                                            <td>{{ i+1 }}</td>
                                            <td>
                                                <input id="idCode" type="text" style="width: 55px;border-width: 0px;"
                                                       name="idCode{{ elevator.idCode }}"
                                                       placeholder="识别码"
                                                       value="{{ elevator.idCode }}" readonly>
                                            </td>
                                            <td>{{ elevator.userEntityName }}</td>
                                            <td>{{ elevator.deviceName }}</td>
                                            <td>{{ elevator.perinspectionDate }}</td>
                                            <td>
                                                <input id="reportID" class="" type="text" style="width: 110px;text-align: center; border-width: 0px; background-color: #dddddd;"
                                                       name="reportID{{ elevator.idCode }}"
                                                       placeholder="报告编号"
                                                       value="{{ elevator.idCode }}{{ company_number }}{{ reporttime }}">
                                            </td>
                                            <td>
                                                <input id="governorCheckDate" type="text" class="datepicker"
                                                       style="width: 100px;text-align: center;border-width: 0px; background-color: #dddddd;"
                                                       name="governorCheckDate{{ elevator.idCode }}" placeholder="校验日期"
                                                       value="{{ elevator.governorCheckDate }}" >
                                            </td>
                                            <td>
                                                <input id="governorSpeed" class="" type="text" style="width: 100px;text-align: center;border-width: 0px; background-color: #dddddd;"
                                                       name="governorSpeed{{ elevator.idCode }}"
                                                       placeholder="校验速度(m/s)" value="{{ elevator.governorSpeed }}">
                                            </td>
                                            <td>
                                                <input id="cwOvDis" class="" type="text"
                                                       style="width: 100px;text-align: center;border-width: 0px; background-color: #dddddd;"
                                                       name="cwOvDis{{ elevator.idCode }}"
                                                       placeholder="对重缓冲距(mm)" value="{{ elevator.cwOvDis }}">
                                            </td>
                                            <td>
                                                <select id="brakeTest" name="brakeTest{{ elevator.idCode }}"
                                                        style="width: 100px;text-align: center;border-width: 0px; background-color: #dddddd;">
                                                    <option value="有">有</option>
                                                    <option value="无" selected="selected">无</option>
                                                </select>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-md-2 col-md-offset-4">
                            <button class="btn btn-primary icon-btn" type="button" id="bt_generation"><i
                                    class="fa fa-fw fa-lg fa-check-circle"></i>生成报告
                            </button>
                        </div>
                        <div class="col-md-2 col-md-offset-1">
                            <button class="btn btn-primary icon-btn" type="reset"><i
                                    class="fa fa-fw fa-lg fa-refresh"></i>重置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
<!-- Javascripts-->
{% block script %}
    {{ super() }}
    {#  表格插件 dataTables  #}
    <script type="text/javascript" src="{{ url_for('static', filename='js/dataTables/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/dataTables/dataTables.bootstrap.min.js') }}"></script>
    {# 提示插件 #}
    <script type="text/javascript" src="{{ url_for('static', filename='js/alert.js') }}"></script>
    {# 日期选择器插件bootstrap-datepicker #}
    <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-datepicker/bootstrap-datepicker.zh-CN.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 表格插件初始化
            var table = $('#sampleTable').DataTable({
                paging: false,      // 分页不显示
                'info': false,      // 左下角信息不显示
                'bFilter': false,   // 搜索框不显示
                "bSort": false,     // 禁止排序
                "language": {
                    "url": "{{ url_for('static', filename='js/dataTables/Chinese.json') }}"
                }
            });

            $('#delete').click( function () {
                var $tbr = $('table tbody tr');
                $tbr.each(function () {
                    table.row('.selected').remove().draw( false );
                })

            } );

            // 日期选择器插件初始化
            $(".datepicker").datepicker({
                format: 'yyyy-mm-dd',
                language: 'zh-CN',
                autoclose: true,
            });
        });



        $("#bt_query").click(function () {
            if (($('#maintenanceContractNumber').val() == "") && ($('#idCode').val() == "") && ($('#userEntityName').val() == "")) {
                ShowFailure('请输入查询条件');
            }
            else {
                $('#form_query').submit();
            }
        });
        $("#bt_generation").click(function () {
            $('#form_table').submit();
            ShowTipAlwaysInTheMiddle('正在生成报告,请稍等', 'info');
        });

        $(function(){
			function initTableCheckbox() {
				var $thr = $('table thead tr');
				var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
				/*将全选/反选复选框添加到表头最前，即增加一列*/
				{#$thr.prepend($checkAllTh);#}
				/*“全选/反选”复选框*/
				var $checkAll = $thr.find('input[type=\'checkbox\']');
				$checkAll.click(function(event){
					/*将所有行的选中状态设成全选框的选中状态*/
					$tbr.find('input[type=\'checkbox\']').prop('checked',$(this).prop('checked'));
					/*并调整所有选中行的CSS样式*/
					if ($(this).prop('checked')) {
						$tbr.find('input[type=\'checkbox\']').parent().parent().addClass('selected');
					} else{
						$tbr.find('input[type=\'checkbox\']').parent().parent().removeClass('selected');
					}
					/*阻止向上冒泡，以防再次触发点击操作*/
					event.stopPropagation();
				});
				/*点击全选框所在单元格时也触发全选框的点击操作*/
				$checkAllTh.click(function(){
					$(this).find('input[type=\'checkbox\']').click();
				});
				var $tbr = $('table tbody tr');
				var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');
				/*每一行都在最前面插入一个选中复选框的单元格*/
				{#$tbr.prepend($checkItemTd);#}
				/*点击每一行的选中复选框时*/
				$tbr.find('input[type=\'checkbox\']').click(function(event){
					/*调整选中行的CSS样式*/
					$(this).parent().parent().toggleClass('selected');
					/*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
					$checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
					/*阻止向上冒泡，以防再次触发点击操作*/
					event.stopPropagation();
				});
				/*点击每一行时也触发该行的选中操作*/
				{#$tbr.click(function(){#}
				{#	$(this).find("input[type='checkbox']").click();#}
				//});
			}
			initTableCheckbox();
		});


    </script>
{% endblock %}